<template>
	<view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in dataList" :key="index">
				<view class="time">时间 {{item.create_time}}</view>
				<view class="info">
					<view class="text flex flex-a-center"><view class="name">进货类型：</view>{{item.reason}}</view>
					<view class="money flex flex-a-center"><view class="name">金额：</view>{{item.amount}}</view>
					<view class="remark flex flex-a-center"><view class="name">备注：</view>{{item.remark}}</view>
					<button class="button">确认进货</button>
				</view>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
				dataList:[],
				page:1,
				total_pages:1,
				postData:{},
				loadMoreStatus:1,
				total_amount:0
            };
        },
        methods: {
			getData(type){
				let that = this
				if(that.page <= that.total_pages){
					henglang.get('Retreat_Granary/granaryDetail',{page:that.page},true,function(res){
						if(type=='loadMore'){
							that.dataList = that.dataList.concat(res.data.data.data)
						}else{
							that.dataList = res.data.data.data
							that.total_pages = res.data.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1 ? 2:0
						}
					})
				}else{
					that.loadMoreStatus = 2
				}
			}
        },
		onLoad(option) {
			let that = this
			this.postData = option
			this.postData.page = 1
			this.getData()
        },
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f1f1f1;
	}
	.flex{
		display: flex;
		&1{
			flex: 1;
		}
		&-a-center{
			align-items: center;
		}
		&-a-start{
			align-items: flex-start;
		}
		&-a-end{
			align-items: flex-end;
		}
		&-j-center{
			justify-content: center;
		}
		&-j-start{
			justify-content: flex-start;
		}
		&-j-end{
			justify-content: flex-end;
		}
	}
	.list{
		padding-top: 20rpx;
		&-item{
			background-color: #FFFFFF;
			border: 2px solid #e0e0e0;
			width: 714rpx;
			box-sizing: border-box;
			margin: 0 auto;
			border-radius: 20rpx;
			margin-bottom: 14rpx;
			box-shadow: 0 0 16rpx rgba(169,169,169,0.3);
			.time{
				color: #666666;
				font-size: 30rpx;
				line-height: 60rpx;
				border-bottom: 2px solid #e0e0e0;
				padding-left: 30rpx;
			}
			.info{
				font-size: 36rpx;
				color: #000000;
				padding: 20rpx{
					left: 30rpx;
				};
				position: relative;
				.flex{
					line-height: 60rpx;
				}
				.name{
					color: #4c4c4c;
				}
				.button{
					position: absolute;
					z-index: 2;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 154rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 10rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					background-color: #23a016;
				}
			}
			
		}
	}
</style>
